import React, { useEffect, useState } from "react";

import styled from "styled-components";

import { useDebounce } from "@/script/index";

import { message } from "antd";
import { CopyOutlined } from "@ant-design/icons";

// 组件-------------------------------------------------------------------------
const Container = styled.div`
  width: 400px;
  height: 80px;
  margin-right: 6.667vw;
`;

const InputText = styled.div`
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
`;

const Input = styled.input`
  width: 70%;
  height: 90%;
  font-size: 16px;
  border: none;
  outline: none;
  border: 1px solid #ccc;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
`;

const Title = styled.div`
  width: 30%;
  height: 100%;
  text-align: right;
  padding-right: 10px;
  background-color: rgba(213, 219, 226, 0.8);
  line-height: 38px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
`;

const Box = styled.div`
  width: 50%;
  height: 32;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
`;
const ColorBlock = styled.div`
  width: 50px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
`;
const ColorText = styled.div`
  line-height: 32px;
  text-align: center;
  cursor: pointer;
`;

function ColorDecimalConversion(props: {
  title: string;
  copyColorText: (text: string) => void;
}) {
  const [messageApi, contextHolder] = message.useMessage();
  const [inputValue, setInputValue] = useState<string>("");
  const [hexColor, setHexColor] = useState<string>("#FFFFFF");
  let isCorrect: boolean = true;

  const { title } = props;
  let colorPattern: RegExp;

  useEffect(() => {
    if (title == "16进制转rgb") {
      // 匹配全部
      colorPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
    } else if (title == "rgb转16进制") {
      colorPattern =
        /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\s*,\s*(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\s*,\s*(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    }
  }, [title, inputValue]);

  const handleInput = useDebounce((e: React.ChangeEvent<HTMLInputElement>) => {
    if (isColorValue(e.target.value)) {
      if (title == "16进制转rgb") {
        setHexColor(e.target.value);
        const rgb = hexToRgb(e.target.value);
        setInputValue(rgb);
      } else if (title == "rgb转16进制") {
        const hex = rgbToHex(e.target.value);
        setHexColor(hex);
        setInputValue(hex);
      }
    } else if (e.target.value == "") {
      setInputValue("");
    } else {
      error();
    }
  }, 1000);

  // 判断输入值是否是16进制或者rgb的颜色值
  function isColorValue(value: string): boolean {
    return colorPattern.test(value);
  }

  function hexToRgb(hex: string) {
    hex = hex.replace("#", "");
    // 缩写颜色值判断
    if (hex.length == 3) {
      const r = parseInt(hex.substring(0, 1), 16);
      const g = parseInt(hex.substring(1, 2), 16);
      const b = parseInt(hex.substring(2, 3), 16);
      return r * r + "," + g * g + "," + b * b;
    } else {
      const r = parseInt(hex.substring(0, 2), 16);
      const g = parseInt(hex.substring(2, 4), 16);
      const b = parseInt(hex.substring(4, 6), 16);
      return r + "," + g + "," + b;
    }
  }

  // RGB代码转换为16进制颜色代码
  function rgbToHex(rgb: string) {
    const r = rgb.split(",")[0];
    const g = rgb.split(",")[1];
    const b = rgb.split(",")[2];

    var rHex = Number(r).toString(16).padStart(2, "0");
    var gHex = Number(g).toString(16).padStart(2, "0");
    var bHex = Number(b).toString(16).padStart(2, "0");
    return "#" + rHex + gHex + bHex;
  }

  // 失败提示
  const error = () => {
    messageApi.open({
      type: "error",
      content: "输入文本格式错误",
    });
  };

  return (
    <Container>
      <div>{contextHolder}</div>
      <InputText>
        <Title>{title}</Title>
        <Input
          type="text"
          placeholder={
            title === "16进制转rgb" ? "例如:#FFFFFF" : "例如:255,255,255"
          }
          style={{
            border: isCorrect == true ? "1px solid #ccc" : "1px solid #f00",
          }}
          onChange={handleInput}
        />
      </InputText>
      {inputValue && (
        <Box>
          <ColorBlock style={{ backgroundColor: `${hexColor}` }} />
          <ColorText
            onClick={() => {
              props.copyColorText(inputValue);
            }}
          >
            {inputValue} {"\u00A0"}
            <CopyOutlined />
          </ColorText>
        </Box>
      )}
    </Container>
  );
}

export default ColorDecimalConversion;
